<template>
    <div>
        <div>
            <el-button type="primary" icon="Plus" class="min-w-24" @click="handleAdd">
                新增
            </el-button>
        </div>
        <div class="mt-4 overflow-y-auto" style="max-height: 400px">
            <el-table v-loading="loading" :data="navList" style="width: 100%; margin-bottom: 20px" row-key="id" border
                default-expand-all stripe>
                <el-table-column label="#" align="center" width="80">
                    <template #default="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column label="导航名称" align="left" prop="title" />
                <el-table-column label="排序" align="center" prop="sort" width="80" />
                <el-table-column label="状态" align="center" prop="isEnable">
                    <template #default="scope">
                        <el-switch v-model="scope.row.isEnable" :before-change="() => false" />
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" align="center" prop="createTime" />
                <el-table-column label="修改时间" align="center" prop="modifyTime" />
                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="handleUpdate(scope.row)">
                            编辑
                        </el-button>
                        <el-button link type="primary" size="small" @click="handleDelete(scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-drawer v-model="drawerShow" :title="title" size="800" @closed="cancel">
            <el-form ref="formRef" :model="form" :rules="rules" label-width="80">
                <el-form-item label="上级分类" prop="tagetId">
                    <el-tree-select placeholder="请选择上级分类" v-model="form.tagetId" :check-strictly="true"
                        :props="{ value: 'id', label: 'title' }" :data="navList" default-expand-all :clearable="true"
                        :expand-on-click-node="false" :check-on-click-node="true" />
                </el-form-item>
                <el-form-item label="分类名称" prop="title">
                    <el-input v-model="form.title" placeholder="请输入分类名称" :clearable="true" />
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input-number v-model="form.sort" :precision="0" placeholder="1" />
                </el-form-item>
                <!-- <el-form-item label="创建时间" prop="createTime">
                    <el-input v-model="form.createTime" disabled placeholder="创建时间" />
                </el-form-item>
                <el-form-item label="修改时间" prop="modifyTime">
                    <el-input v-model="form.modifyTime" disabled placeholder="修改时间" />
                </el-form-item> -->
                <el-form-item label="状态" prop="isEnable">
                    <el-switch v-model="form.isEnable" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-drawer>
    </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import { navigationCreate, navigationDelete, navigationQueryTree, navigationUpdate } from "@/api/yzll";
const { proxy } = getCurrentInstance();

const navList = ref([]);
const loading = ref(false);
const drawerShow = ref(false);
const title = ref(null);
const form = ref({});
const rules = {
    title: [{ required: true, message: "请输入分类名称", trigger: "blur" }],
}

onMounted(() => {
    getList();
});

function getList() {
    loading.value = true;
    navigationQueryTree().then((res) => {
        navList.value = res.data;
        loading.value = false;
    });
}

function handleAdd() {
    form.value = { sort: 1, };
    drawerShow.value = true;
    title.value = "新增";
}

function handleUpdate(row) {
    form.value = { ...row };
    drawerShow.value = true;
    title.value = "编辑";
}

function handleDelete(row) {
    proxy.$modal
        .confirm('确认删除"' + row.title + '"?')
        .then(() => {
            return navigationDelete(row.id);
        })
        .then((res) => {
            proxy.$modal.msgSuccess("删除成功");
            getList();
        });
}

function submitForm() {
    proxy.$refs["formRef"].validate((valid) => {
        if (valid) {
            if (form.value.id != undefined) {
                navigationUpdate({ ...form.value, imageUrl: "" }).then((response) => {
                    proxy.$modal.msgSuccess("修改成功");
                    drawerShow.value = false;
                    getList();
                });
            } else {
                navigationCreate({ ...form.value, areaType: 2, imageUrl: "" }).then((response) => {
                    proxy.$modal.msgSuccess("新增成功");
                    drawerShow.value = false;
                    getList();
                });
            }
        }
    });
}

function cancel() {
    drawerShow.value = false;
}

</script>
